<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>jQuery resize event</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad()"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.4 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CFile"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="jQuery_resize_event"></a>jQuery resize event</h1><div class=CBody><p><b>Version: 1.1, Last updated: 3/14/2010</b></p><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>Project Home</td><td class=CDLDescription><a href="http://benalman.com/projects/jquery-resize-plugin/" class=LURL target=_top>http://benalman.com<wbr>/projects<wbr>/jquery-resize-plugin<wbr>/</a></td></tr><tr><td class=CDLEntry>GitHub</td><td class=CDLDescription><a href="http://github.com/cowboy/jquery-resize/" class=LURL target=_top>http://github.com/cowboy/jquery-resize/</a></td></tr><tr><td class=CDLEntry>Source</td><td class=CDLDescription><a href="http://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js" class=LURL target=_top>http://github.com<wbr>/cowboy<wbr>/jquery-resize<wbr>/raw<wbr>/master<wbr>/jquery.ba-resize.js</a></td></tr><tr><td class=CDLEntry>(Minified)</td><td class=CDLDescription><a href="http://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.min.js" class=LURL target=_top>http://github.com<wbr>/cowboy<wbr>/jquery-resize<wbr>/raw<wbr>/master<wbr>/jquery.ba-resize.min.js</a> (1.0kb)</td></tr></table><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#jQuery_resize_event" >jQuery resize event</a></td><td class=SDescription><b>Version: 1.1, Last updated: 3/14/2010</b></td></tr><tr class="SGeneric SMarked"><td class=SEntry><a href="#License" >License</a></td><td class=SDescription>Copyright &copy; 2010 &ldquo;Cowboy&rdquo; Ben Alman, Dual licensed under the MIT and GPL licenses. </td></tr><tr class="SGeneric"><td class=SEntry><a href="#Examples" >Examples</a></td><td class=SDescription>This working example, complete with fully commented code, illustrates a few ways in which this plugin can be used.</td></tr><tr class="SGeneric SMarked"><td class=SEntry><a href="#Support_and_Testing" >Support and Testing</a></td><td class=SDescription>Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself).</td></tr><tr class="SGeneric"><td class=SEntry><a href="#Release_History" >Release History</a></td><td class=SDescription></td></tr><tr class="SGroup"><td class=SEntry><a href="#Properties" >Properties</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent1 SMarked"><td class=SEntry><a href="#jQuery.resize.delay" >jQuery.<wbr>resize.<wbr>delay</a></td><td class=SDescription>The numeric interval (in milliseconds) at which the resize event polling loop executes. </td></tr><tr class="SProperty SIndent1"><td class=SEntry><a href="#jQuery.resize.throttleWindow" >jQuery.<wbr>resize.<wbr>throttleWindow</a></td><td class=SDescription>Throttle the native window object resize event to fire no more than once every <a href="#jQuery.resize.delay" class=LProperty id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">jQuery.resize.delay</a> milliseconds. </td></tr><tr class="SGroup"><td class=SEntry><a href="#Events" >Events</a></td><td class=SDescription></td></tr><tr class="SEvent SIndent1 SMarked"><td class=SEntry><a href="#resize_event" >resize event</a></td><td class=SDescription>Fired when an element&rsquo;s width or height changes. </td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGeneric"><div class=CTopic><h3 class=CTitle><a name="License"></a>License</h3><div class=CBody><p>Copyright &copy; 2010 &ldquo;Cowboy&rdquo; Ben Alman, Dual licensed under the MIT and GPL licenses.&nbsp; <a href="http://benalman.com/about/license/" class=LURL target=_top>http://benalman.com/about/license/</a></p></div></div></div>

<div class="CGeneric"><div class=CTopic><h3 class=CTitle><a name="Examples"></a>Examples</h3><div class=CBody><p>This working example, complete with fully commented code, illustrates a few ways in which this plugin can be used.</p><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>resize event</td><td class=CDLDescription><a href="http://benalman.com/code/projects/jquery-resize/examples/resize/" class=LURL target=_top>http://benalman.com<wbr>/code<wbr>/projects<wbr>/jquery-resize<wbr>/examples<wbr>/resize<wbr>/</a></td></tr></table></div></div></div>

<div class="CGeneric"><div class=CTopic><h3 class=CTitle><a name="Support_and_Testing"></a>Support and Testing</h3><div class=CBody><p>Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself).</p><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>jQuery Versions</td><td class=CDLDescription>1.3.2, 1.4.1, 1.4.2</td></tr><tr><td class=CDLEntry>Browsers Tested</td><td class=CDLDescription>Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1.</td></tr><tr><td class=CDLEntry>Unit Tests</td><td class=CDLDescription><a href="http://benalman.com/code/projects/jquery-resize/unit/" class=LURL target=_top>http://benalman.com<wbr>/code<wbr>/projects<wbr>/jquery-resize<wbr>/unit<wbr>/</a></td></tr></table></div></div></div>

<div class="CGeneric"><div class=CTopic><h3 class=CTitle><a name="Release_History"></a>Release History</h3><div class=CBody><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>1.1</td><td class=CDLDescription>(3/14/2010) Fixed a minor bug that was causing the event to trigger immediately after bind in some circumstances.&nbsp; Also changed $.fn.data to $.data to improve performance.</td></tr><tr><td class=CDLEntry>1.0</td><td class=CDLDescription>(2/10/2010) Initial release</td></tr></table></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Properties"></a>Properties</h3></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="jQuery.resize.delay"></a>jQuery.<wbr>resize.<wbr>delay</h3><div class=CBody><p>The numeric interval (in milliseconds) at which the resize event polling loop executes.&nbsp; Defaults to 250.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="jQuery.resize.throttleWindow"></a>jQuery.<wbr>resize.<wbr>throttleWindow</h3><div class=CBody><p>Throttle the native window object resize event to fire no more than once every <a href="#jQuery.resize.delay" class=LProperty id=link2 onMouseOver="ShowTip(event, 'tt1', 'link2')" onMouseOut="HideTip('tt1')">jQuery.resize.delay</a> milliseconds.&nbsp; Defaults to true.</p><p>Because the window object has its own resize event, it doesn&rsquo;t need to be provided by this plugin, and its execution can be left entirely up to the browser.&nbsp; However, since certain browsers fire the resize event continuously while others do not, enabling this will throttle the window resize event, making event behavior consistent across all elements in all browsers.</p><p>While setting this property to false will disable window object resize event throttling, please note that this property must be changed before any window object resize event callbacks are bound.</p></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="Events"></a>Events</h3></div></div>

<div class="CEvent"><div class=CTopic><h3 class=CTitle><a name="resize_event"></a>resize event</h3><div class=CBody><p>Fired when an element&rsquo;s width or height changes.&nbsp; Because browsers only provide this event for the window element, for other elements a polling loop is initialized, running every <a href="#jQuery.resize.delay" class=LProperty id=link3 onMouseOver="ShowTip(event, 'tt1', 'link3')" onMouseOut="HideTip('tt1')">jQuery.resize.delay</a> milliseconds to see if elements&rsquo; dimensions have changed.&nbsp; You may bind with either .resize( fn ) or .bind( &ldquo;resize&rdquo;, fn ), and unbind with .unbind( &ldquo;resize&rdquo; ).</p><h4 class=CHeading>Usage</h4><blockquote><pre>jQuery('selector').bind( 'resize', function(e) {
  // element's width or height has changed!
  ...
});</pre></blockquote><h4 class=CHeading>Additional Notes</h4><ul><li>The polling loop is not created until at least one callback is actually bound to the &lsquo;resize&rsquo; event, and this single polling loop is shared across all elements.</li></ul><h4 class=CHeading>Double firing issue in jQuery 1.3.2</h4><p>While this plugin works in jQuery 1.3.2, if an element&rsquo;s event callbacks are manually triggered via .trigger( &lsquo;resize&rsquo; ) or .resize() those callbacks may double-fire, due to limitations in the jQuery 1.3.2 special events system.&nbsp; This is not an issue when using jQuery 1.4+.</p><blockquote><pre>// While this works in jQuery 1.4+
$(elem).css({ width: new_w, height: new_h }).resize();

// In jQuery 1.3.2, you need to do this:
var elem = $(elem);
elem.css({ width: new_w, height: new_h });
elem.data( 'resize-special-event', { width: elem.width(), height: elem.height() } );
elem.resize();</pre></blockquote></div></div></div>

</div><!--Content-->


<div id=Footer><a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MEntry><div class=MFile id=MSelected>jQuery resize event</div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Index</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MIndex><a href="../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Events.html">Events</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Files.html">Files</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Properties.html">Properties</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Events">Events</option><option value="Files">Files</option><option value="Properties">Properties</option></select></div></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CProperty>The numeric interval (in milliseconds) at which the resize event polling loop executes. </div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>